<template>
  <el-image :src="url" alt="流程实例图" />
</template>
<script setup lang="ts">
import { ref, type PropType, type Ref, onUpdated } from "vue";
import { taskApi } from "@/api/flow/task/index";
const url = ref("");

const props = defineProps({
  procInstId: {
    type: String,
    default: "",
  },
});

const prevProcInstId = ref("");

//变更检测.
onUpdated(() => {
  if (prevProcInstId.value !== props.procInstId) {
    prevProcInstId.value = props.procInstId; // 更新前值以便下次比较
    // 执行相应逻辑
    refresh();
  }
});

//刷新
function refresh() {
  if (props.procInstId && props.procInstId !== "") {
    taskApi.findProcInstDiagram(props.procInstId).then((res) => {
      url.value = window.URL.createObjectURL(res.data);
    });
  }
}

refresh();
</script>
